<template>
  <Crad title="举办单位" :oprationText="isShowMore ? '查看全部' : ''" @opration="handleMoreClick">
    <view class="container">
      <view class="organizing-unit-container">
        <view
          v-for="(item, index) in organizingUnitList.slice(0, 3)"
          :key="index"
          class="organizing-unit"
        >
          <TImage :src="item.logo" width="80rpx" height="80rpx" border-radius="8rpx"></TImage>
          <view class="unit-box">
            <text class="orgName text-overflow-1">{{ item.orgName }}</text>
            <view
              v-if="item.tagName"
              class="unit-type"
              :style="{
                backgroundColor: getUnitType(item.activityType)?.background,
                color: getUnitType(item.activityType)?.color,
              }"
            >
              {{ item.tagName }}
            </view>
          </view>
        </view>
      </view>
      <view v-if="isShowMore" class="more" @click="handleMoreClick">
        <text>展开更多</text>
        <text class="ali-icon icon-xia" style="font-size: 24rpx"></text>
      </view>
    </view>
  </Crad>
</template>
<script setup lang="ts">
  import type { IOrganizingUnit } from '@/api/activity/types';
  import { computed } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import Crad from '@/components/Crad/index.vue';
  import { navigateTo } from '@/router';
  import { ActivityTypeEnum } from '@/enums/activityStatusEnum';

  const props = defineProps({
    organizingUnitList: {
      type: Array as () => IOrganizingUnit[],
      default: [],
    },
  });

  const isShowMore = computed(() => {
    return props.organizingUnitList.length > 3;
  });

  const handleMoreClick = () => {
    navigateTo({
      name: 'organizingUnitList',
      options: {
        organizingUnitList: props.organizingUnitList,
      },
    });
  };

  const getUnitType = (activityType: ActivityTypeEnum) => {
    return {
      [ActivityTypeEnum.oneself]: {
        background: '#2878FF',
        color: '#FFF',
      },
      [ActivityTypeEnum.other_join]: {
        background: '#D0F7FF',
        color: '#2878FF',
      },
    }[activityType];
  };
</script>
<style lang="scss" scoped>
  .container {
    .organizing-unit-container {
      display: flex;
      flex-direction: column;
      gap: 32rpx;
      .organizing-unit {
        display: flex;
        align-items: center;
        gap: 16rpx;
        .unit-box {
          display: flex;
          flex-direction: column;
          justify-content: left;
          gap: 8rpx;
          .orgName {
            font-size: 28rpx;
            font-weight: 700;
            line-height: 40rpx;
          }
          .unit-type {
            padding: 4rpx 8rpx;
            font-size: 16rpx;
            line-height: 20rpx;
            border-radius: 4rpx;
            width: fit-content;
          }
        }
      }
    }
    .more {
      margin-top: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8rpx;
      color: #969799;
      font-size: 24rpx;
      line-height: 32rpx;
    }
  }
</style>
